<template>
  {{ compData }}
  <div class="font_form">
    <el-divider> 描边样式 </el-divider>
    <el-form-item
      size="small"
      class="input_bottom"
      label="描边模式:"
      label-width="60px"
    >
      <el-select v-model="compData.stroke.mode">
        <el-option
          v-for="item in strokeModeList"
          :key="item.type"
          :label="item.label"
          :value="item.type"
        />
      </el-select>
    </el-form-item>

    <el-form-item
      size="small"
      class="input_bottom"
      label="描边宽度:"
      label-width="60px"
    >
      <el-input-number
        v-model="compData.stroke.lineWidth"
        :precision="0"
        :step="1"
      />
    </el-form-item>

    <el-form-item label="描边样式:">
      <div class="form_item_box">
        <el-select v-model="compData.stroke.type" @change="changeFill">
          <el-option
            v-for="item in fillTypeList"
            :key="item.type"
            :label="item.label"
            :value="item.type"
          />
        </el-select>
        <el-tooltip
          :enterable="false"
          effect="dark"
          content="圆型渐变格式刷"
          placement="top"
        >
          <el-button
            @click="formatBase"
            class="form_item_btn"
            color="#626aef"
            :plain="true"
            circle
          >
            <el-icon><BrushFilled /></el-icon>
          </el-button>
        </el-tooltip>
      </div>
    </el-form-item>
    <el-form-item v-if="compData.stroke.type == 'color'">
      <el-color-picker
        v-model="compData.stroke.color"
        show-alpha
        :predefine="predefineColors"
      />
    </el-form-item>
    <div
      class="fill_box"
      v-if="['linearGradient', 'radialGradient'].includes(compData.stroke.type)"
    >
      <el-form-item
        size="small"
        class="input_bottom"
        label="起点X:"
        label-width="60px"
      >
        <el-input-number
          v-model="compData.stroke.gradient.x0"
          :precision="0"
          :step="1"
        />
      </el-form-item>
      <el-form-item
        size="small"
        class="input_bottom"
        label="起点Y:"
        label-width="60px"
      >
        <el-input-number
          v-model="compData.stroke.gradient.y0"
          :precision="0"
          :step="1"
        />
      </el-form-item>
      <el-form-item
        v-if="compData.stroke.type == 'radialGradient'"
        size="small"
        class="input_bottom"
        label="起点R:"
        label-width="60px"
      >
        <el-input-number
          v-model="compData.stroke.gradient.r0"
          :precision="0"
          :step="1"
        />
      </el-form-item>
      <el-form-item
        size="small"
        class="input_bottom"
        label="终点X:"
        label-width="60px"
      >
        <el-input-number
          v-model="compData.stroke.gradient.x1"
          :precision="0"
          :step="1"
        />
      </el-form-item>
      <el-form-item
        size="small"
        class="input_bottom"
        label="终点Y:"
        label-width="60px"
      >
        <el-input-number
          v-model="compData.stroke.gradient.y1"
          :precision="0"
          :step="1"
        />
      </el-form-item>
      <el-form-item
        v-if="compData.stroke.type == 'radialGradient'"
        size="small"
        class="input_bottom"
        label="终点R:"
        label-width="60px"
      >
        <el-input-number
          v-model="compData.stroke.gradient.r1"
          :precision="0"
          :step="1"
        />
      </el-form-item>
      <div
        class="fill_style_item input_bottom"
        v-for="(item, index) in compData.stroke.gradualColor"
        :key="index"
      >
        <div class="clear_fill" @click="deleteGradualColor(index)">✖</div>
        <el-color-picker
          v-model="item.color"
          show-alpha
          :predefine="predefineColors"
        />
        <el-slider v-model="item.step" :step="10" show-stops> </el-slider>
      </div>
      <el-button @click="addGradualColor">添加渐变</el-button>
    </div>
  </div>
</template>

<script setup lang="ts">
import { BrushFilled } from '@element-plus/icons-vue'
import { predefineColors } from '@/config/canvas'
import { useCanvasStore } from '@/store/modules/canvasStore'
import { fillTypeList, strokeModeList } from '@/modules/shareCanvas/canvasData'

const canvasStore = useCanvasStore()
const props = defineProps({
  compData: {
    type: Object,
    default: {},
  },
})
function changeFill(e: any) {
  if (e == 'linearGradient') {
    lineFormat()
    if (!props.compData.stroke.gradualColor) {
      addGradualColor()
    }
  } else if (e == 'radialGradient') {
    radialFormat()
    if (!props.compData.stroke.gradualColor) {
      addGradualColor()
    }
  }
}
/**
 * 渐变色填充相关的处理api
 */
function addGradualColor() {
  if (!props.compData.stroke.gradualColor) {
    props.compData.stroke.gradualColor = []
  }
  props.compData.stroke.gradualColor.push({
    color: '#000',
    step: 0,
  })
}
function deleteGradualColor(index: number) {
  props.compData.stroke.gradualColor.splice(index, 1)
}
function formatBase() {
  if (props.compData.stroke.type == 'linearGradient') {
    lineFormat()
    if (!props.compData.stroke.gradualColor) {
      addGradualColor()
    }
  } else if (props.compData.stroke.type == 'radialGradient') {
    radialFormat()
    if (!props.compData.stroke.gradualColor) {
      addGradualColor()
    }
  }
}
// 线型格式刷
function lineFormat() {
  let gradient = {
    x0: clickStartX(),
    y0: clickStartY(),
    x1: clickEndX(),
    y1: clickEndY(),
  }

  props.compData.stroke['gradient'] = gradient
}

// 圆型格式刷
async function radialFormat() {
  let gradient = {
    x0: clickStartX(),
    y0: clickStartY(),
    r0: clickStartR(),
    x1: clickEndX(),
    y1: clickEndY(),
    r1: clickEndR(),
  }
  props.compData.stroke['gradient'] = gradient
}
function clickStartX() {
  if (props.compData.stroke.type == 'linearGradient') {
    console.log(props.compData.x, 'props.compData.x')

    return props.compData.x
  } else {
    return (2 * props.compData.x + props.compData.width) * 0.5
  }
}
function clickStartY() {
  if (props.compData.stroke.type == 'linearGradient') {
    return props.compData.y
  } else {
    console.log(
      2 * props.compData.y + props.compData.height,
      'props.compData.y + props.compData.fontSize'
    )

    return (2 * props.compData.y + props.compData.height) * 0.5
  }
}
function clickStartR() {
  return 0
}
function clickEndX() {
  if (props.compData.stroke.type == 'linearGradient') {
    return props.compData.x + props.compData.width
  } else {
    return (2 * props.compData.x + props.compData.width) * 0.5
  }
}
function clickEndY() {
  if (props.compData.stroke.type == 'linearGradient') {
    return props.compData.y + props.compData.height
  } else {
    return (2 * props.compData.y + props.compData.height) * 0.5
  }
}
function clickEndR() {
  let r = 0
  if (props.compData.height > props.compData.width) {
    r = props.compData.height
  } else {
    r = props.compData.width
  }
  return r
}
</script>
<style lang="scss" scoped>
.form_item_box {
  display: flex;
  .form_item_btn {
    margin-left: 10px;
  }
}
.upload_box {
  display: flex;
  flex-direction: column;
  align-items: center;
  .upload_capy_icon {
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
  }
  .avatar-uploader :deep(.el-upload) {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .avatar-uploader :deep(.el-upload):hover {
    border-color: #409eff;
  }
  .el-icon.avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    text-align: center;
  }
  .avatar {
    width: 178px;
    display: block;
  }
  :deep(.el-input) {
    margin-bottom: 18px;
  }
}
.el-form-item {
  margin-bottom: 18px;
}
.fill_box {
  margin: 0 auto;
  width: calc(100% - 30px);
  .fill_style_item {
    position: relative;

    .clear_fill {
      position: absolute;
      top: 0;
      right: 0;
      line-height: 14px;
      cursor: pointer;
    }
  }
  .fill_gradual_shape_box {
    display: flex;
    :deep(.el-button) {
      margin-left: 10px;
    }
  }
}
</style>
